@mixin blockStyle($isEdit: "false") {
    .de-block {
        width: 100%;
    }

    // 텍스트 블럭
    .de-text-block {
        min-height: 1.6em;
        outline: 0;

        @if $isEdit == "true" {
            &:empty:hover::before,
            &:empty:focus::before {
                display: inline;
                content: "Type a paragraph";
                color: #ccc;
                cursor: text;
            }
        }
    }

    // 해딩 블럭
    .de-heading-block {
        min-height: 1.6em;
        outline: 0;

        &[data-level="1"] {
            font-size: 2em;
        }

        &[data-level="2"] {
            font-size: 1.5em;
        }

        &[data-level="3"] {
            font-size: 1.17em;
        }

        @if $isEdit == "true" {
            &:empty:hover::before,
            &:empty:focus::before {
                display: inline;
                content: "Type a Heading";
                color: #ccc;
                cursor: text;
            }
        }
    }

    // 리스트 블럭
    .de-list-block {
        display: flex;
        flex-direction: column;
        row-gap: 4px;
        padding-left: 24px;

        &[data-style="disc"] {
            list-style: disc;
        }

        &[data-style="square"] {
            list-style: square;
        }

        &[data-style="decimal"] {
            list-style: decimal;
        }

        &[data-style="lower-alpha"] {
            list-style: lower-alpha;
        }

        &[data-style="upper-alpha"] {
            list-style: upper-alpha;
        }

        &[data-style="lower-roman"] {
            list-style: lower-roman;
        }

        &[data-style="upper-roman"] {
            list-style: upper-roman;
        }

        .de-item {
            min-height: 1.6em;
            outline: 0;
            list-style: inherit;

            @if $isEdit == "true" {
                &:empty:hover::before,
                &:empty:focus::before {
                    display: inline;
                    content: "Type a list item";
                    color: #ccc;
                    cursor: text;
                }
            }
        }
    }

    // 이미지 블럭
    .de-image-block {
        display: flex;
        align-items: center;
        flex-direction: column;
        row-gap: 8px;

        &.de-align-left {
            align-items: flex-start;

            .de-caption {
                text-align: left;
            }
        }

        &.de-align-right {
            align-items: flex-end;

            .de-caption {
                text-align: right;
            }
        }

        .de-image-area {
            position: relative;
            max-width: 25%;

            @for $i from 25 to 101 {
                &[data-maxwidth="#{$i}"] {
                    max-width: $i * 1%;
                }
            }

            .de-img {
                width: 100%;
                height: auto;
            }

            .de-btn {
                position: absolute;
                top: 50%;
                width: 8px;
                height: 100px;
                background: #ccc;
                border: 1px solid #333;
                transform: translate(-50%, -50%);
                cursor: col-resize;
                user-select: none;
                z-index: 100;

                &.de-btn-left {
                    left: 0;
                }

                &.de-btn-right {
                    left: 100%;
                }
            }
        }

        .de-caption {
            width: 100%;
            min-height: 1.6em;
            color: #909090;
            text-align: center;
            outline: 0;

            @if $isEdit == "true" {
                &:empty:hover::before,
                &:empty:focus::before {
                    display: inline;
                    content: "Type a caption";
                    color: #ccc;
                    cursor: text;
                }
            }
        }
    }

    // 코드 블럭
    .de-code-block {
        display: flex;
        flex-wrap: wrap;

        .de-filename {
            flex: 1;
            padding: 5px 10px;
            box-sizing: border-box;
            outline: 0;

            @if $isEdit == "true" {
                &:empty:hover::before,
                &:empty:focus::before {
                    display: inline;
                    content: "Type a Filename";
                    cursor: text;
                }
            }
        }

        .de-language {
            width: 120px;
            text-align: right;
            padding: 5px 10px;
            box-sizing: border-box;
        }

        .de-pre {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            white-space: pre-wrap;

            .de-code-content {
                display: block;
                min-height: 1.6em;
                width: 100%;
                font-family: Inconsolata, monospace, sans-serif;
                word-break: break-word;
                outline: 0;

                @if $isEdit == "true" {
                    &:empty:hover::before,
                    &:empty:focus::before {
                        display: inline;
                        content: "Type a Code";
                        cursor: text;
                    }
                }
            }
        }

        &[data-theme="github"] {
            color: #24292e;
            background: #f1f1f1;

            .de-filename {
                color: #24292e;
                background: #ccc;

                @if $isEdit == "true" {
                    &:empty:hover::before,
                    &:empty:focus::before {
                        color: #8b8d8f;
                    }
                }
            }

            .de-language {
                color: #24292e;
                background: #ccc;

                @if $isEdit == "true" {
                    &:empty:hover::before,
                    &:empty:focus::before {
                        color: #8b8d8f;
                    }
                }
            }

            @if $isEdit == "true" {
                .de-code-content {
                    &:empty:hover::before,
                    &:empty:focus::before {
                        color: #8b8d8f;
                    }
                }
            }

            .hljs-doctag,
            .hljs-keyword,
            .hljs-meta .hljs-keyword,
            .hljs-template-tag,
            .hljs-template-variable,
            .hljs-type,
            .hljs-variable.language_ {
                /* prettylights-syntax-keyword */
                color: #d73a49;
            }

            .hljs-title,
            .hljs-title.class_,
            .hljs-title.class_.inherited__,
            .hljs-title.function_ {
                /* prettylights-syntax-entity */
                color: #6f42c1;
            }

            .hljs-attr,
            .hljs-attribute,
            .hljs-literal,
            .hljs-meta,
            .hljs-number,
            .hljs-operator,
            .hljs-variable,
            .hljs-selector-attr,
            .hljs-selector-class,
            .hljs-selector-id {
                /* prettylights-syntax-constant */
                color: #005cc5;
            }

            .hljs-regexp,
            .hljs-string,
            .hljs-meta .hljs-string {
                /* prettylights-syntax-string */
                color: #032f62;
            }

            .hljs-built_in,
            .hljs-symbol {
                /* prettylights-syntax-variable */
                color: #e36209;
            }

            .hljs-comment,
            .hljs-code,
            .hljs-formula {
                /* prettylights-syntax-comment */
                color: #6a737d;
            }

            .hljs-name,
            .hljs-quote,
            .hljs-selector-tag,
            .hljs-selector-pseudo {
                /* prettylights-syntax-entity-tag */
                color: #22863a;
            }

            .hljs-subst {
                /* prettylights-syntax-storage-modifier-import */
                color: #24292e;
            }

            .hljs-section {
                /* prettylights-syntax-markup-heading */
                color: #005cc5;
                font-weight: bold;
            }

            .hljs-bullet {
                /* prettylights-syntax-markup-list */
                color: #735c0f;
            }

            .hljs-emphasis {
                /* prettylights-syntax-markup-italic */
                color: #24292e;
                font-style: italic;
            }

            .hljs-strong {
                /* prettylights-syntax-markup-bold */
                color: #24292e;
                font-weight: bold;
            }

            .hljs-addition {
                /* prettylights-syntax-markup-inserted */
                color: #22863a;
                background-color: #f0fff4;
            }

            .hljs-deletion {
                /* prettylights-syntax-markup-deleted */
                color: #b31d28;
                background-color: #ffeef0;
            }
        }

        &[data-theme="github-dark-dimmed"] {
            color: #adbac7;
            background: #22272e;

            .de-filename {
                color: #adbac7;
                background: #494e54;

                @if $isEdit == "true" {
                    &:empty:hover::before,
                    &:empty:focus::before {
                        color: #96a0aa;
                    }
                }
            }

            .de-language {
                color: #adbac7;
                background: #494e54;

                @if $isEdit == "true" {
                    &:empty:hover::before,
                    &:empty:focus::before {
                        color: #96a0aa;
                    }
                }
            }

            @if $isEdit == "true" {
                .de-code-content {
                    &:empty:hover::before,
                    &:empty:focus::before {
                        color: #96a0aa;
                    }
                }
            }

            .hljs-doctag,
            .hljs-keyword,
            .hljs-meta .hljs-keyword,
            .hljs-template-tag,
            .hljs-template-variable,
            .hljs-type,
            .hljs-variable.language_ {
                /* prettylights-syntax-keyword */
                color: #f47067;
            }

            .hljs-title,
            .hljs-title.class_,
            .hljs-title.class_.inherited__,
            .hljs-title.function_ {
                /* prettylights-syntax-entity */
                color: #dcbdfb;
            }

            .hljs-attr,
            .hljs-attribute,
            .hljs-literal,
            .hljs-meta,
            .hljs-number,
            .hljs-operator,
            .hljs-variable,
            .hljs-selector-attr,
            .hljs-selector-class,
            .hljs-selector-id {
                /* prettylights-syntax-constant */
                color: #6cb6ff;
            }

            .hljs-regexp,
            .hljs-string,
            .hljs-meta .hljs-string {
                /* prettylights-syntax-string */
                color: #96d0ff;
            }

            .hljs-built_in,
            .hljs-symbol {
                /* prettylights-syntax-variable */
                color: #f69d50;
            }

            .hljs-comment,
            .hljs-code,
            .hljs-formula {
                /* prettylights-syntax-comment */
                color: #768390;
            }

            .hljs-name,
            .hljs-quote,
            .hljs-selector-tag,
            .hljs-selector-pseudo {
                /* prettylights-syntax-entity-tag */
                color: #8ddb8c;
            }

            .hljs-subst {
                /* prettylights-syntax-storage-modifier-import */
                color: #adbac7;
            }

            .hljs-section {
                /* prettylights-syntax-markup-heading */
                color: #316dca;
                font-weight: bold;
            }

            .hljs-bullet {
                /* prettylights-syntax-markup-list */
                color: #eac55f;
            }

            .hljs-emphasis {
                /* prettylights-syntax-markup-italic */
                color: #adbac7;
                font-style: italic;
            }

            .hljs-strong {
                /* prettylights-syntax-markup-bold */
                color: #adbac7;
                font-weight: bold;
            }

            .hljs-addition {
                /* prettylights-syntax-markup-inserted */
                color: #b4f1b4;
                background-color: #1b4721;
            }

            .hljs-deletion {
                /* prettylights-syntax-markup-deleted */
                color: #ffd8d3;
                background-color: #78191b;
            }
        }
    }
}
